<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>颜色测试</title>
		<style>
			#test-color {
				width: 100px;
				height: 100px;
				background-color: #008800;
			}
		</style>
	</head>

	<body>
		<label>颜色值：</label><input type="text" id="color" value="#008800" />
		<div id="test-color"></div>
		<script>
			var color = document.getElementById("color");
			var test_color = document.getElementById("test-color");
			color.oninput = function() {
				test_color.style.backgroundColor = color.value;
			}
		</script>
	</body>

</html>